<template>
  <v-row class="policy-big-box" ref="policyBox">
    <v-col style="max-width: 15%">
      <v-card outlined elevation="2" class="policy-left-card">
        <v-row style="margin-top: 1vh; margin-left: 2%">
          <div class="policy-card-title">出发城市</div>
        </v-row>
        <v-row style="margin-left: 2%">
          <div class="policy-card-subtitle">Departure</div>
        </v-row>
        <v-row style="margin-left: 2%; margin-top: 2vh">
          <div class="policy-city">{{ result.city_name }}</div>
        </v-row>
        <v-row class="policy-icon-row">
          <div class="policy-icon">
            <v-icon color="white" size="52px"> {{icon}} </v-icon>
          </div>
        </v-row>
        <v-row style="margin-left: 2%; margin-top: 4vh">
          <div class="policy-safe">{{ safetyLevel }}</div>
        </v-row>
        <v-row style="margin-left: 10%; margin-top: 6vh">
          <div style="background: #1e1e1e; height: 1vh; width: 80%"></div>
        </v-row>
      </v-card>
    </v-col>
    <v-col>
      <v-card elevation="2" outlined class="policy-card">
        <v-row class="policy-middle-row">
          <div class="policy-middle-card-title">
            离开 {{ result.city_name }} 您需要注意这些政策
          </div>
        </v-row>
        <v-row class="policy-middle-text max-height10vh">
          {{ result.out_desc }}
        </v-row>
        <v-row class="policy-middle-row" style="margin-top: 4vh">
          <div class="policy-middle-card-title">
            返回 {{ result.city_name }} 您需要注意这些政策
          </div>
        </v-row>
        <v-row class="policy-middle-text max-height23vh">
          <v-col>
            <h3>来自高中风险地区</h3>
            {{ result.high_in_desc }}
          </v-col>

          <v-col>
            <h3>来自低风险地区</h3>
            {{ result.low_in_desc }}
          </v-col>
        </v-row>
      </v-card>
    </v-col>
    <v-col style="max-width: 15%">
      <v-card outlined elevation="2" class="policy-left-card">
        <v-row style="margin-top: 1vh; margin-left: 2%">
          <div class="policy-card-title">便民服务</div>
        </v-row>
        <v-row
          style="margin-left: 2%; margin-top: 4vh; min-height: 17vh; width: 96%"
        >
          <v-img height="18vh" width="60%" contain :src="result.health_code_picture">
          </v-img>
        </v-row>
        <v-row style="margin-left: 2%; margin-top: 3vh">
          <div class="policy-card-subtitle">
            {{ result.health_code_name }}
          </div>
        </v-row>
        <v-row style="margin-top: 3vh; margin-left: 2%">
          <v-btn
            text
            class="policy-body-root"
            style="width: 90%; font-size: 18px; color: #00b0ff"
            @click="openUrl(result.health_code_gid)"
          >
            查看使用教程
          </v-btn>
        </v-row>
        <v-row style="display:flex; align-items:center; justify-content:center" class="policy-body-root">
          <v-img max-width="40%" contain src="@/assets/bottle.png"> </v-img>
        </v-row>
        <v-row style="margin-left: 2%; margin-top: 4vh">
          <v-dialog  transition="departure" v-model="dialog" width="60%">
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                color="#00b0ff"
                outlined
                v-bind="attrs"
                v-on="on"
                style="
                  width: 90%;
                  font-size: 14px;
                  height: 6vh;
                  box-shadow: none;
                  border: none;
                "
                @click="getFacilities"
              >
                查看核酸检测机构
              </v-btn>
            </template>
            <v-card>
              <v-row class="policy-body-root" style="margin: 2vh">
                <span style="font-size: 32px">
                  {{ result.city_name }}核酸检测机构
                </span>
              </v-row>
              <v-divider
                style="margin-top: 3vh; margin-left: 3%; width: 94%"
              ></v-divider>

              <v-data-table
                v-if="facilities!=null"
                :headers="headers"
                :items="facilities"
                :sort-desc="[false, true]"
                class="table"
                items-per-page="10"
                :loading="facilities===null"
                style="width: 94%; margin-left: 3%; font-size:25px;"
              >
              </v-data-table>

              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="green darken-1" text @click="dialog = false">
                  我已知晓
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
        </v-row>
      </v-card>
    </v-col>
  </v-row>
</template>

<script>
export default {
  name: "PolicyCard",
  props: {
    result: {
      type: Object,
    },
  },
  created(){
     
  },
  methods: {
    openUrl(url) {
      window.open(url, "_blank");
    },
    getFacilities(){
      if(this.facilities ==null)  this.$api.policy.getFacilities(this.result.city_id).then((res)=>{
          if(res.success===true &&res.data.reason === "success!"){
              this.facilities = res.data.result.data;
                this.dialog = true;
          }
          else {
              this.$Message.error("很抱歉，暂未可用核酸检测机构信息");
          }
      });
    }
  },
  data: () => ({
    dialog: false,
    facilities:null,
    headers: [
      {
        text: "机构名称",
        value: "name",
      },
      {
        text: "电话号码",
        value: "phone",
      },
      {
        text: "详细地址",
        value: "address",
      },
    ],
  }),
  computed: {
    safetyLevel() {
      var txt = "";
      switch (parseInt(this.result.risk_level)) {
        case 0:
          txt = "暂无风险等级";
          break;
        case 1:
          txt = "低风险";
          break;
        case 2:
          txt = "中风险";
          break;
        case 3:
          txt = "高风险";
          break;
        case 4:
          txt = "部分中风险";
          break;
        case 5:
          txt = "部分高风险";
          break;
        case 6:
          txt = "部分中高风险";
          break;
      }
      return txt;
    },
    icon(){
              var txt = "";
  switch (parseInt(this.result.risk_level)) {
        case 0:
        case 1:
          txt = "mdi-check";
          break;
        case 2:
        case 4:
          txt = "alert-circle-outline";
          break;
        case 3:
        case 5:
        case 6:
          txt = "mdi-close";
          break;
      }
      return txt;
    },
  },
};
</script>
<style scoped>
.policy-big-box {
  --iconColor:#00db00;
  width: 95%;
  height: 60vh;
  /* border: #00db00 solid 1px; */
}
.policy-left-card {
  /* border: #00b0ff solid 1px; */
  height: 58vh;
}
.policy-card-title {
  /* border: #2894ff solid 1px; */
  width: 90%;
  height: 5vh;
  font-size: 32px;
  text-align: center;
  line-height: 5vh;
}
.policy-card-subtitle {
  /* border: #fa2929 solid 1px; */
  width: 90%;
  height: 3.5vh;
  font-size: 24px;
  text-align: center;
  line-height: 3.5vh;
}
.policy-city {
  margin-top: 1vh;
  /* border: aqua solid 1px; */
  width: 90%;
  height: 6vh;
  font-size: 48px;
  text-align: center;
  line-height: 6vh;
}
.policy-icon-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  margin-top: 5vh;
}
.policy-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  background: var(--iconColor);
  border: #1e1e1e solid 6px;
  height: 8vh;
  width: 34%;
}
.policy-safe {
  margin-top: 2vh;
  /* border: aqua solid 1px; */
  width: 90%;
  height: 6vh;
  font-size: 36px;
  text-align: center;
  line-height: 6vh;
}
.policy-card {
  height: 58vh;
  /* display:flex;
    flex-direction: column; */
  /* overflow-y:auto; */
}
.policy-middle-row {
  /* border: #00db00 solid 1px; */
  margin-left: 4%;
  margin-top: 2vh;
  width: 92%;
  /* flex:1 */
}
.policy-middle-card-title {
  /* border: #2894ff solid 1px; */
  width: 90%;
  height: 3vh;
  font-size: 32px;
}
.policy-middle-text {
  margin-left: 4%;
  margin-top: 4vh;
  overflow-y: scroll;
  width: 92%;
  font-size: 22px;
  color: #707070;
  /* flex:5; */
  /* border: #fa2929 solid 1
  px; */
}
.text-start{
    font-size:22px !important;
}
.max-height23vh {
  max-height: 23vh;
}
.max-height10vh {
  max-height: 10vh;
}
::-webkit-scrollbar {
  width: 15px;
  height: 10px;
}
/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background-color: #a1a3a9;
  border-radius: 3px;
}
</style>